<template>
  <view class="container" v-if="hasResult">
    <view class="oid-num">订单号: {{oid}}</view>
    <view class="tips">
      <view>1.如果未完成付款，请点击“继续支付</view>
      <view>2.如果已付款，请点击“已完成付款”</view>
      <view>3.如果对国学直播课和其他测算感兴趣，请点击领课/测算按钮;</view>
    </view>
    <view class="btn-box">
      <view class="btn-continue" @click="orderContinue">继续支付</view>
      <view class="btn-complete" @click="orderComplete">已完成支付</view>
    </view>
    <product-getcode-teacher></product-getcode-teacher>
    <product-getcode-course></product-getcode-course>
    <bottom-recommend></bottom-recommend>
  </view>
</template>

<script>
import { placeOrderApi, queryWxOrderInfoApi } from '@/http/api'
import { getQueryObject } from "@/utils/index";
import { wxAppId } from "@/http/env.js";
export default {
	data() {
		return {
      hasResult: false,
      code: '',
      oid: ''
		}
	},
  methods: {
    // 微信环境判断
    is_weixn(){
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
      } else {
        return false;
      }
    },
    // 订单再支付
    orderContinue() {
      this.getOrderInfo(this.code, this.oid)
    },
    // 订单完成
    orderComplete() {
      this.getWxOrderInfo(this.oid);
    },
    // 订单跳转
    getOrderInfo(code, oid) {
      let params = {
        code: code,
        oid: oid
      }
      let _this = this;
      placeOrderApi(params).then(res => {
        if (res.code === 200) {
          console.log('开始支付')
          WeixinJSBridge.invoke('getBrandWCPayRequest', {
              "appId": wxAppId,     //公众号ID，由商户传入     
              "timeStamp": res.data.timeStamp,     //时间戳，自1970年以来的秒数     
              "nonceStr": res.data.nonceStr,      //随机串     
              "package": res.data.prepay_id,
              "signType": "RSA",     //微信签名方式：     
              "paySign": res.data.paySign //微信签名 
          },
          function(res) {
            _this.hasResult = true;
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                uni.showToast({
                  title: "支付成功",
                  icon: 'success'
                });
                uni.redirectTo({
                  url: `/pages/synthesis/synthesisResult/index?oid=${oid}`
                })
                return
            }
          });
        }
      })
    },
    // 微信端查询订单情况
    getWxOrderInfo(oid) {
      queryWxOrderInfoApi(oid).then(res => {
        if (res.code === 200) {
          // 判断订单状态
          if (res.msg.code == "ORDER_NOT_EXIST") {
            uni.showToast({
              title: res.msg.code.message,
              icon: 'none'
            });
            return
          }else if (res.msg.trade_state == "NOTPAY") {
            uni.showToast({
              title: res.msg.code.message,
              icon: 'none'
            });
            return
          }else if (res.msg.trade_state == "SUCCESS") {
            uni.showToast({
              title: "支付成功",
              icon: 'success'
            });
            // 跳转结果页
            uni.redirectTo({
              url: `/pages/synthesis/synthesisResult/index?oid=${oid}`
            })
          }
        }else{
          uni.showToast({
            title: '订单查询出错',
            icon: 'none'
          });
          return
        }
      })
    }
  },
  mounted() {
  },
  created() {
    let isWx = this.is_weixn();
    console.log(isWx)
    if (isWx === false) {
      uni.showToast({
        title: '请在微信客户端打开',
        icon: 'none'
      });
      return
    }
    let param = getQueryObject(window.location.href);
    this.code = param.code;
    this.oid = param.oid;
    if (this.code && this.oid) {
      this.getOrderInfo(this.code, this.oid);
    }else{
      uni.showToast({
        title: '获取订单id失败，请重新尝试打开',
        icon: 'none'
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #e5e5e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 73rpx;
  .oid-num {
    width: 600rpx;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 48rpx;
  }
  .tips {
    width: 600rpx;
    font-size: 28rpx;
    line-height: 56rpx;
  }
  .btn-box {
    margin: 51rpx 0 41rpx;
    .btn-continue {
      width: 481rpx;
      height: 81rpx;
      background-color: #a60000;
      border-radius: 10rpx;
      color: #fff;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15rpx;
    }
    .btn-complete {
      width: 481rpx;
      height: 81rpx;
      background-color: #e5e5e5;
      border-radius: 10rpx;
      border: solid 2rpx #333333;
      color: #333333;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      
    }
  }
  .course-box {
    
  }
  .add-btn-box {
    .add-btn {
      animation-name: scaleDraw;/*关键帧名称*/
      animation-timing-function: ease-in-out;/*动画的速度曲线*/
      animation-iteration-count: infinite;/*动画播放的次数*/
      animation-duration:0.5s;/*动画所花费的时间*/
    }
  }
}
</style>